<extend name="./Public/templete/base.html" />

<block name="title">
  <title>NoteManage</title>
</block>

<block name="link">
  <style>
    .header {
      width: 98%;
      height: 65px;
      margin-top: 10px;
      margin-left: 1px;
      background-color: #393d49;
      color: #FFFFFF;
    }

    .header .name {
      height: 20px;
      width: 100px;
      font-size: 15px;
      margin-left: 15px;
      padding-top: 10px;
    }

    .header .intro {
      height: 20px;
      width: 400px;
      font-size: 15px;
      margin-left: 15px;
      margin-top: 15px;
      padding-bottom: 8px;
    }

    .tab-content {
      display: block;
      width: 98%;
      height: 50px;
      margin-top: 25px;
      margin-left: 1px;
    }

    .tab-content #add{
      margin-left: 0.5%;
    }

    .mytable {
      width: 98%;
    }
  </style>
  <link rel="shortcut icon" href="../../../favicon.ico" />
  <!-- <link href="../../../Public/source/css/mystyle.css" rel="stylesheet" > -->
  <link href="../../../Public/source/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
  <link href="../../../Public/source/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../Public/source/bootstrap-3.3.7/css/bootstrap-theme.css" rel="stylesheet">
  <link href="../../../Public/source/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  <link href="../../../Public/source/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
  <link href="../../../Public/source/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="../../../Public/source/layui/css/layui.css" rel="stylesheet" />
</block>

<block name="content">
  <div class="layui-body">
    <div style="padding: 15px;">
      <div class="header">
        <div class="name">
          <b>学习记录管理</b>
        </div>
        <div class="intro">可在线新增、编辑文档，所有学习记录可供他人分享</div>
      </div>
      <div class="tab-content">
        <div id="toolbar" class="toolbar" style="position: relative;top:-10px;">
          <button class="btn btn-primary btn-refresh" onclick="refresh()" title="刷新">
            <i class="fa fa-refresh"></i> 刷新 </NOtton>
            <button class="btn btn-success btn-add" id="add" title="添加">
              <i class="fa fa-plus"></i> 添加Note</NOtton>
        </div>
      </div>
      <div class="mytable" style="position: relative;top:-20px;"> 
        <table id="demo" lay-filter="test"></table>
      </div>
    </div>
  </div>
</block>

<block name="js">
  <script src="../../../Public/source/layui/layui.js"></script>
  <script type="text/javascript" src="../../../Public/source/jquery-3.2.1.js"></script>
  <script type="text/html" id="barDemo">
  <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" style="text-decoration: none;">查看</a> -->
  <a class="layui-btn layui-btn-xs" lay-event="edit" style="text-decoration: none;">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="text-decoration: none;">删除</a>
  </script>

  <script>
    layui.use('table', function () {
      var table = layui.table;

      //第一个实例
      table.render({
        elem: '#demo'
        , height: 520
        , url: '__URL__/getSelf' //数据接口
        , page: true //开启分页
        , limit: 10
        , cols: [[ //表头
          { field: 'id', title: 'ID', width: 70, sort: true, fixed: 'left', align: 'center' }
          , { field: 'title', title: '标题', align: 'center',sort: true, width: 250 }
          , { field: 'edit', title: '作者', align: 'center', sort: true,width: 120 }
          , { field: 'content', title: '内容', width: 442,sort: true, align: 'center' }
          , { field: 'time', title: '日期', width: 145, sort: true, align: 'center' }
          , { field: 'score', title: '评分', width: 70, sort: true, align: 'center' }
          , { field: 'file', title: '附件', width: 400, sort: true,align: 'center' }
          , { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo' }
        ]]
      });
      table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        // if (layEvent === 'detail') { //查看
        //   layer.open({
        //     type: 1,
        //     title: '查看详情',
        //     maxmin: true,
        //     skin: 'layui-layer-rim', //加上边框
        //     area: ['600px', '520px'], //宽高
        //     shadeClose: true, //点击遮罩关闭层
        //     resize: false,
        //     content: '<tr>' + data.id + '<br><br>' + data.title + '<br><br>' + data.edit + '<br><br>' + data.content + '<br><br>' + data.time + '<br><br>' + data.score + '<br><br>' + data.file + '<br><tr>'
        //   });
        // }
        // else 
        if (layEvent === 'del') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            $.ajax({
              url: './deleteNote/id/' + data.id + '',
              type: 'post',
              success: function (data) {
                if (data.status == 1) {
                  alert('删除成功');
                }
                else {
                  alert(data.info);
                }
              }
            });
            //向服务端发送删除指令
          });
        }
        else if (layEvent === 'edit') { //编辑
          layer.open({
            type: 2,
            title: '修改',
            maxmin: true,
            skin: 'layui-layer-rim', //加上边框
            area: ['720px', '480px'], //宽高
            shadeClose: true, //点击遮罩关闭层
            resize: false,
            content: ['showAlterNote/id/' + data.id + ''],
            end: function () {
              location.reload();
            }
          });
        }
      });
    });
  </script>

  <script>
    layui.use('element', function () {
      var element = layui.element;
    });
  </script>

  <script type="text/javascript">
    function page(num) {
      $.ajax({

      })
    }
  </script>

  <script>
    window.onload() = function () { //刷新页面
      var a = document.getElementById("mytable");
      a.setAttribute("onclick", "click()");
    }
    function refresh() {
      window.location.reload();
      alert("刷新成功");
    }	
  </script>
  <script>
    $(function () {
      $('#add').on('click', function () { //页面层
        layer.open({
          type: 2,
          title: '添加',
          maxmin: true,
          skin: 'layui-layer-rim', //加上边框
          area: ['720px', '480px'], //宽高
          shadeClose: true, //点击遮罩关闭层
          resize: false,
          content: ['./showAddNote'],
          end: function () {
            location.reload();
          }
        });
      });
    });
  </script>
</block>